import { useState, useEffect } from 'react';
import { Table, Button, Space, Modal, Form, Input, message } from 'antd';
import axios from 'axios';

const SystemList = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm();
    const [editingId, setEditingId] = useState(null);

    // 获取系统数据
    const fetchUsers = async () => {
        setLoading(true);
        try {
            const res = await axios.get('/api/systems');
            setData(res.data);
        } catch (error) {
            message.error('数据加载失败');
        }
        setLoading(false);
    };

    useEffect(() => { fetchUsers(); }, []);

    // 表格列配置
    const columns = [
        { title: '系统名称', dataIndex: 'sytemname' },
        { title: '系统编号', dataIndex: 'code' },
        { title: '系统路径', dataIndex: 'url' },
        {
            title: '操作',
            render: (_, record) => (
                <Space>
                    <Button onClick={() => handleEdit(record)}>编辑</Button>
                    <Button danger onClick={() => handleDelete(record.id)}>删除</Button>
                </Space>
            )
        }
    ];

    // 编辑操作
    const handleEdit = (record) => {
        form.setFieldsValue(record);
        setEditingId(record.id);
        setIsModalOpen(true);
    };

    // 删除操作
    const handleDelete = async (id) => {
        try {
            await axios.delete(`/api/systems/${id}`);
            message.success('删除成功');
            fetchUsers();
        } catch (error) {
            message.error('删除失败');
        }
    };

    // 表单提交
    const handleSubmit = async (values) => {
        try {
            if (editingId) {
                await axios.put(`/api/systems/${editingId}`, values);
                message.success('更新成功');
            } else {
                await axios.post('/api/systems', values);
                message.success('创建成功');
            }
            setIsModalOpen(false);
            form.resetFields();
            fetchUsers();
        } catch (error) {
            message.error('操作失败');
        }
    };

    return (
        <div>
            <div style={{ marginBottom: 16, textAlign: 'right' }}>
                <Button 
                    type="primary"
                    onClick={() => {
                        setEditingId(null);
                        setIsModalOpen(true);
                        form.resetFields();
                    }}
                >
                    新建系统
                </Button>
            </div>

            <Table
                columns={columns}
                dataSource={data}
                loading={loading}
                rowKey="id"
                bordered
                pagination={{ pageSize: 8 }}
            />

            {/* 编辑/新建模态框 */}
            <Modal
                title={editingId ? '编辑系统' : '新建系统'}
                open={isModalOpen}
                onCancel={() => setIsModalOpen(false)}
                footer={null}
            >
                <Form form={form} onFinish={handleSubmit}>
                    <Form.Item label="系统名称" name="systemname" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label="系统编号" name="code" rules={[{ type: 'email' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label="系统路径" name="url">
                        <Input />
                    </Form.Item>
                    <Button type="primary" htmlType="submit">提交</Button>
                </Form>
            </Modal>
        </div>
    );
};

export default SystemList;